<!--
  - Copyright(c)  2022 厦门外里科技有限公司 All rights reserved.
  -
  - https://www.wailikeji.com
  -
  - 版权所有，侵权必究！
  -->

<template>
	<view>
		<view class="title" style="font-size:34rpx;margin: 20rpx 40rpx; text-align: center">开通会员</view>
		<view style="margin: 0rpx 40rpx;">会员特权:</view>
		<view style=" border-radius: 30rpx; margin: 0rpx 40rpx; background-color: #ffffff; ">
			<u-table border-color="#dead66">
				<u-tr>
					<u-th>类型</u-th>
					<u-th>普通用户</u-th>
					<u-th>会员</u-th>
				</u-tr>
				<u-tr>
					<u-td>查看群</u-td>
					<u-td>{{vipConfig.normal.seeQrcodeGold>0?'-'+vipConfig.normal.seeQrcodeGold:'免'}}积分</u-td>
					<u-td>{{vipConfig.vip.seeQrcodeGold>0?'-'+vipConfig.vip.seeQrcodeGold:'免'}}积分</u-td>
				</u-tr>

				<u-tr>
					<u-td>发布群</u-td>
					<u-td>{{vipConfig.normal.pubQrcodeGold>0?'-'+vipConfig.normal.pubQrcodeGold:'免'}}积分</u-td>
					<u-td>{{vipConfig.vip.pubQrcodeGold>0?'-'+vipConfig.vip.pubQrcodeGold:'免'}}积分</u-td>
				</u-tr>
				<u-tr>
					<u-td>签到积分</u-td>
					<u-td>+{{vipConfig.normal.signGetGold}}积分</u-td>
					<u-td>+{{vipConfig.vip.signGetGold}}积分</u-td>
				</u-tr>
				<u-tr>
					<u-td>邀请积分</u-td>
					<u-td>+{{vipConfig.normal.inviteGetGold}}积分</u-td>
					<u-td>+{{vipConfig.vip.inviteGetGold}}积分</u-td>
				</u-tr>
				<u-tr>
					<u-td>查看精准群/名片</u-td>
					<u-td>{{vipConfig.normal.canSearchQrcode?'支持':'不支持'}}</u-td>
					<u-td>{{vipConfig.vip.canSearchQrcode?'支持':'不支持'}}</u-td>
				</u-tr>
			</u-table>
			<view style="color: #939294; font-size: 18upx; margin-top: 12upx;">
				<u-icon name="info" color="#ff8a00"></u-icon>积分用于发布/置顶平台的群/名片
			</view>
			<view style="color: #f20033; font-size: 18upx; margin-top: 12upx;">
				<u-icon name="info" color="#ff8a00"></u-icon>限时活动：现在<u-tag text="升级代理" shape="circle"@click="navTo('./teamManage')"/>可赠送永久会员
			</view>
		</view>
		<u-row justify="center" gutter="30" style="padding: 0upx 24rpx; margin-top: 40upx;">
			<u-col v-for="(item,index) in userVipShopList" :key="index" :span="12/userVipShopList.length"
				text-align="center">
				<view class="setMeal" @tap="vipTapInfo(index)">
					<view class="meal-content" :class="{'meal-content-active': vipShopSelect==index}">
						<view class="meal-content-header">
							<view class="price" style="font-size: 50upx; color: #e7a14e; font-weight: 500;">
								<u-icon name="rmb" color="#dead66" size="28">￥</u-icon>
								{{item.price}}
							</view>
							<s class="originalPrice" style="color: #939294;">
								￥{{item.originalPrice}}
							</s>
						</view>
						<view style="height: 30%; display: flex; align-items: center; justify-content: center;">
							{{item.howMuchTime==1200?'永久':item.howMuchTime+'个月'}}
						</view>
					</view>
				</view>
			</u-col>
		</u-row>
		<u-button shape="circle" type="success" style="background-color: #50c34d; margin: 40upx;" @click="subimt()">确认支付
		</u-button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				vipConfig: {
					normal: {},
					vip: {}
				},
				//购买会员的套餐列表
				userVipShopList: [],
				vipShopSelect: 0, //购买会员默认选中
			}
		},
		created() {
			this.init()
		},
		methods: {
			/**
			 * 跳转路由
			 * @param {Object} url
			 */
			navTo(url) {
				uni.navigateTo({
					url: url
				});
			},
			subimt() {
				let query = {};
				query.scene='0';
				query.goodId=this.userVipShopList[this.vipShopSelect].id;
				this.$Router.push({
					path: "/pages/my/recharge",
					query: query
				})
			},
			/**
			 * 初始化
			 */
			init() {
				this.$api.api('config.vip')
					.then(res => {
						if (res.code == 200) {
							this.vipConfig = res.data
						} else {
							uni.showToast({
								icon: 'none',
								position: 'bottom',
								title: res.msg
							});
						}
					})
				this.$api.api('config.vipList')
					.then(res => {
						if (res.code == 200) {
							this.userVipShopList = res.rows
							this.vipShopSelect = this.userVipShopList.length - 1
						} else {
							uni.showToast({
								icon: 'none',
								position: 'bottom',
								title: res.msg
							});
						}
					})
			},
			/**
			 * 会员充值套餐选中
			 * @param {Object} e
			 */
			vipTapInfo(e) {
				this.vipShopSelect = e
			}
		}
	}
</script>

<style lang="scss">
	.u-table {
		font-weight: 450;

		.u-th {
			background-color: #dead66;
			color: #ffffff;
		}
	}

	.setMeal {
		width: 100%;
		height: 180upx;

		.meal-content {
			width: 100%;
			height: 100%;
			background-color: #f8e8d3;
			border-radius: 16upx; //面包圆形倒角
			border: 0.8px solid #f8e8d3;

			.meal-content-header {
				padding-top: 10upx;
				background-color: #f8f8f8;
				height: 70%;
				border-radius: 16upx 16upx 0px 0px;
			}
		}

		//被选中的会员套餐
		.meal-content-active {
			background-color: #dead66;
			border: 0.5px solid #dead66;
		}
	}
</style>
